<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>充值模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .item .layui-table-body .layui-table-cell {
            height: 39px;
            line-height: 42px;
        }

        .laytable-cell-1-0-1, .laytable-cell-1-0-5, .laytable-cell-1-0-4, .laytable-cell-1-0-6, .laytable-cell-1-0-7 {
            overflow: visible !important;
        }

        span .layui-icon {
            line-height: initial;
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -7px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">

        <div class="layui-card">
            <div class="layui-card-header">
                支付项明细
            </div>
        <div class="layui-card-body">
            <form class="layui-form item">
                <table id="LAY-pay-item" lay-filter="LAY-pay-item"></table>
                <script type="text/html" id="feeTpl">
                    <div class="layui-form-item">
                        <input type="hidden" name="id[]" value="{{d.id}}">
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="total_fee[]" value="{{d.totalFeeText}}" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入" onchange="edit('totalFeeText',this,'{{d.LAY_TABLE_INDEX}}');">
                        </div>
                        <div class="layui-form-mid layui-word-aux">元</div>
                    </div>
                </script>

                <script type="text/html" id="currencyTpl">
                    <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="virtual_currency[]"  value="{{d.virtual_currency}}" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入" onchange="edit('virtual_currency',this,'{{d.LAY_TABLE_INDEX}}');">
                    </div>
                    <div class="layui-form-mid layui-word-aux">书币</div>
                    </div>
                </script>

                <script type="text/html" id="giftTpl">
                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="point_gift[]" value="{{d.point_gift}}" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入" onchange="edit('point_gift',this,'{{d.LAY_TABLE_INDEX}}');">
                        </div>
                        <div class="layui-form-mid layui-word-aux">书点</div>
                    </div>
                </script>

                <script type="text/html" id="vipdaysTpl">
                    <div class="layui-form-item open">
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="vipdays[]" lay-verify="required"  lay-filter="switch" data-index="{{d.LAY_TABLE_INDEX}}" data-field="vipdays">
                                <option value="0">请选择</option>
                                <option value="365" {{#  if(d.vipdays == 365){ }}selected{{#  } }}>包年</option>
                                <option value="90" {{#  if(d.vipdays == 90){ }}selected{{#  } }}>包季</option>
                                <option value="30" {{#  if(d.vipdays == 30){ }}selected{{#  } }}>包月</option>
                            </select>
                        </div>
                    </div>
                </script>

                <script type="text/html" id="labelTpl">
                    <div class="layui-form-item open">
                        <div class="layui-input-inline" style="width: 80px;">
                        <select name="lable_open[]" lay-verify="required"   lay-filter="switch" data-index="{{d.LAY_TABLE_INDEX}}" data-field="lable_open">
                            <option value="1" {{#  if(d.lable_open == 1){ }}selected{{#  } }}>是</option>
                            <option value="0" {{#  if(d.lable_open == 0){ }}selected{{#  } }}>否</option>
                        </select>
                        </div>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" name="lable[]" value="{{d.lable}}" autocomplete="off" class="layui-input" placeholder="角标名称" onchange="edit('lable',this,'{{d.LAY_TABLE_INDEX}}');">
                        </div>
                    </div>
                </script>

                <script type="text/html" id="firstTpl">
                    <div class="layui-form-item open">
                        <div class="layui-input-inline" style="width: 80px;">
                            <select name="first[]" lay-verify="required"  lay-filter="switch" data-index="{{d.LAY_TABLE_INDEX}}" data-field="first">
                                <option value="1" {{#  if(d.first == 1){ }}selected{{#  } }}>首充</option>
                                <option value="0" {{#  if(d.first == 0){ }}selected{{#  } }}>否</option>
                            </select>
                        </div>
                    </div>
                </script>

                <script type="text/html" id="selectedTpl">
                    <div class="layui-form-item open">
                        <div class="layui-input-inline" style="width: 80px;">
                            <select name="selected[]" lay-verify="required" lay-filter="switch" data-index="{{d.LAY_TABLE_INDEX}}" data-field="selected">
                                <option value="1" {{#  if(d.selected == 1){ }}selected{{#  } }}>选中</option>
                                <option value="0" {{#  if(d.selected == 0){ }}selected{{#  } }}>否</option>
                            </select>
                        </div>
                    </div>
                </script>

                <script type="text/html" id="stateTpl">
                    <div class="layui-form-item open">
                        <div class="layui-input-inline" style="width: 80px;">
                            <select name="state[]" lay-verify="required" lay-filter="switch" data-index="{{d.LAY_TABLE_INDEX}}" data-field="state">
                                <option value="1" {{#  if(d.state == 1){ }}selected{{#  } }}>启用</option>
                                <option value="0" {{#  if(d.state == 0){ }}selected{{#  } }}>否</option>
                            </select>
                        </div>
                    </div>
                </script>

                <script type="text/html" id="descTpl">
                    <div class="layui-form-item">
                        <div class="layui-input-inline"  style="width: 250px;">
                            <input type="text" name="desc[]" value="{{d.desc}}" autocomplete="off" class="layui-input" placeholder="可不填，不填读者端自动生成" onchange="edit('desc',this,'{{d.LAY_TABLE_INDEX}}');">
                        </div>
                    </div>
                </script>

                <script type="text/html" id="sortTpl">
                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="text" name="sort[]" value="{{d.sort}}" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入" onchange="edit('sort',this,'{{d.LAY_TABLE_INDEX}}');">
                        </div>
                    </div>
                </script>

            </form>

            <script type="text/html" id="toolbarDemo">

                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="add" type="button">添加金额配置</button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">保存金额配置</button>
                </div>

            </script>
            <script type="text/html" id="table-useradmin-admin">
                <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','admin'], function(){
        var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,table = layui.table;

        //监听提交
        form.on('submit(formDemo)', function(data){
            admin.req({
                url: '/recharge/setChannelItem'
                , type: "POST"
                , data: data.field
                , done: function (res) {
                    layer.msg('设置成功', {icon: 1, time: 1000}, function () {
                        table.reload('LAY-pay-item', {
                            url: '/recharge/channelItems'
                        });
                    });
                },not_finish:function (res) {
                    layer.msg(res.msg);
                }
            });
            return false;
        });

   

        //监听下拉，重新赋值缓冲区
        form.on('select(switch)', function(data){
            var index = $(data.elem).data('index');
            var field = $(data.elem).data('field');
            var oldData = layui.table.cache['LAY-pay-item'];
            oldData[index][field] = data.value;
            table.reload('LAY-pay-item',{
                url: '',
                page:false,
                data : oldData
            });
        });


        var tableIns = table.render({
            elem: '#LAY-pay-item'
            , url: '/recharge/channelItems'
            , toolbar: '#toolbarDemo'
            , defaultToolbar: false
            , cellMinWidth: 100
            , even:true
            , page:false
            , limit: Number.MAX_VALUE
            , height: 'full-20' //高度最大化减去差值
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            , cols: [
                [{field: 'totalFeeText', title: '充值金额',templet: '#feeTpl',minWidth: 180}
                    , {field: 'label', title: '添加角标',templet: '#labelTpl', align: 'center',minWidth: 240}
                    , {field: 'virtual_currency', title: '充值书币',templet: '#currencyTpl',minWidth: 180}
                    , {field: 'point_gift', title: '赠送书点',templet: '#giftTpl',minWidth: 180}
                    , {field: 'vipdays', title: '<span>套餐选择</span>',templet: '#vipdaysTpl',minWidth: 150}
                    , {field: 'first', title: '<span lay-tips="打开后未充值用户才展示，已充值用户不再展示">首充判断</span>',templet: '#firstTpl', align: 'center'}
                    , {field: 'selected', title: '<span lay-tips="设置多个选中或无选中状态充值项，则排第一位的默认选中">是否选中</span>',templet: '#selectedTpl', align: 'center'}
                    , {field: 'state', title: '是否启用',templet: '#stateTpl', align: 'center'}
                    , {field: 'sort', title: '<span lay-tips="数字越小拍的越前">排序</span>',templet: '#sortTpl', align: 'center'}
                    , {field: 'desc', title: '促销描述',templet: '#descTpl',minWidth: 270}
                    , {
                    title: '操作',
                    align: 'center',
                    fixed: 'right',
                    toolbar: '#table-useradmin-admin',
                }]]
        });

        //头工具栏事件
        table.on('toolbar(LAY-pay-item)', function (obj){
            switch (obj.event) {
                case 'add':
                    var oldData = table.cache['LAY-pay-item'];
                    var newRow = {
                        'id':'',
                        'totalFeeText': 0,
                        'lable': '',
                        'lable_open': 0,
                        'sort': 0,
                        'selected': 0,
                        'state': 1,
                        'vipdays': 0,
                        'point_gift': 0,
                        'virtual_currency': 0,
                        'first': 0,
                        'total_fee': 0,
                        'desc': '',
                    };
                    oldData.push(newRow);
                    tableIns.reload({
                        url: '',
                        page:false,
                        data : oldData
                    });
                break;
            }
        });


        //监听工具条
        table.on('tool(LAY-pay-item)', function(obj){
            var data = obj.data;
            if (obj.event === 'del'){
                layer.confirm('确认删除此充值项吗？',{icon: 3, title:false}, function(index){
                    admin.req({
                        url: '/recharge/delChannelItem'
                        , type: "POST"
                        , data: {'id': obj.data.id}
                        , done: function (res) {
                            layer.msg('删除成功', {icon: 1, time: 1000}, function () {
                                obj.del();
                                layer.close(index);
                            });
                        },not_finish:function (res) {
                            layer.msg(res.msg);
                        }
                    });
                });
            }
        });
    });

    //重新赋值缓存区数据，防止添加行数的时候，把数据恢复原有
    function edit(field,obj,index) {
        var oldData = layui.table.cache['LAY-pay-item'];
        oldData[index][field] = obj.value;
        layui.table.reload('LAY-pay-item',{
            url: '',
            page:false,
            data : oldData
        });
    }
</script>
</body>
</html>

